Pedagogisk editor

Klicka på någon av rosa kolumn-knapparna för att kopiera koden. Gå sedan till "tools -> source code" för att klistra in koden.

Innan du kopierar sidan så glöm inte att trycka på "Verkställ ändringar" så att dina element kommer med i det template du får.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sidans titel</title>
<style>
*, *:before, *:after {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box !important;
	-moz-box-sizing: border-box !important;
	-ms-box-sizing: border-box !important;
	box-sizing: border-box !important;
}

/* Clear floats after the columns */
.row:after {content: ""; display: table;  clear: both;}
.column0 {float:left; width: 100%; min-height:50px;}
.column  {float:left; width: 50%; }
.column3 {float:left; width: 33.33%;}
.column10{float:left; width: 10%;}
.column20{float:left; width: 20%;}
.column30{float:left; width: 30%;}
.column40{float:left; width: 40%;}
.column50{float:left; width: 50%;}
.column60{float:left; width: 60%;}
.column70{float:left; width: 70%;}
.column80{float:left; width: 80%;}
.column90{float:left; width: 90%;}

/* Responsive layout - makes the columns stack on top of each other instead of next to each other */
@media screen and (max-width:600px) {
    .column0, .column, .column3, .column10, .column20, .column30, .column40, .column50, .column60, .column70, .column80, .column90 {
        width: 100%;
    }
}
</style>
</head>
<body>
</body>
</html>

Grafisk design: Saga Björk 20c

Inspiration: 22C Webbutvecklarna!